import React, { PureComponent } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { Layout, Menu } from "antd";
import IconFont from "../../components/iconfont";

import { taskStoreActions } from "../../actions";
import { taskStoreSelectors } from "../../selectors";

import { isEmpty } from "lodash";

const { Sider } = Layout;

const Main = styled(Sider)`
  background: rgb(217, 217, 217);
  flex: 0 0 200px;
  max-width: 200px;
  min-width: 200px;
  width: 200px;
`;
@connect(state => {
  const listTasksState = taskStoreSelectors.listTasks(state) || {};
  return {
    query: listTasksState.request.query,
  };
})
export default class TaskSider extends PureComponent {
  componentDidMount() {
    this.listTasks({ label: "all", status: "todo" });
  }
  listTasks = (filters = {}) => {
    const query = {};
    if (isEmpty(filters)) {
      query.label = "all";
      query.status = "todo";
    } else {
      Object.keys(filters).forEach(k => {
        query[k] = filters[k];
      });
    }
    this.props.dispatch(taskStoreActions.listTasks.request({ query }));
  };
  onMenuClick = ({ key }) => {
    const { query } = this.props;
    if (query.status) {
      this.listTasks({ label: key, status: query.status });
    } else {
      this.listTasks({ label: key, status: "todo" });
    }
  };
  render() {
    return (
      <Main>
        <Menu
          defaultSelectedKeys={["all"]}
          mode="inline"
          style={{ background: "transparent" }}
          onClick={e => this.onMenuClick(e)}
        >
          <Menu.Item key="all">
            <IconFont type="icon-tubiao115" />
            全部
          </Menu.Item>
          <Menu.Item key="my">
            <IconFont type="icon-push-pin" />
            我的任务
          </Menu.Item>
          <Menu.Item key="front">
            <IconFont type="icon-html5" />
            前端开发
          </Menu.Item>
          <Menu.Item key="service">
            <IconFont type="icon-database" />
            后端开发
          </Menu.Item>
          <Menu.Item key="design">
            <IconFont type="icon-laptop" />
            产品设计
          </Menu.Item>
        </Menu>
      </Main>
    );
  }
}
